﻿@page "/tests/snackbar";
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Configuration</CardTitle>
            </CardHeader>
            <CardBody>
                <Row>
                    <Column ColumnSize="ColumnSize.IsAuto">
                        <Field>
                            <FieldLabel>
                                Animation Duration (ms)
                            </FieldLabel>
                            <FieldBody>
                                <NumericEdit TValue="int" @bind-Value="@animationDuration" />
                            </FieldBody>
                        </Field>
                    </Column>
                </Row>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.OnY">
            <CardHeader>
                <CardTitle>Snackbar</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    Snackbars provide brief messages about app processes at the bottom of the screen.
                </CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Clicked="@(()=>snackbar.Show())">Snackbar</Button>
                <Button Color="Color.Primary" Clicked="@(()=>snackbarAction.Show())">Snackbar With Action</Button>
                <Button Color="Color.Primary" Clicked="@(()=>snackbarMultiline.Show())">Multiline Snackbar</Button>
                <Button Color="Color.Primary" Clicked="@(()=>snackbarLeft.Show())">Left-Aligned Snackbar</Button>
                <Button Color="Color.Primary" Clicked="@(()=>snackbarRight.Show())">Right-Aligned Snackbar</Button>
                <Button Color="Color.Primary" Clicked="@(()=>snackbarTop.Show())">Top-Aligned Snackbar</Button>
                <Button Color="Color.Primary" Clicked="@(()=>snackbarTopEnd.Show())">Top-Right-Aligned Snackbar</Button>
                <Button Color="Color.Primary" Clicked="@(()=>snackbarTopStart.Show())">Top-Left-Aligned Snackbar</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Colored Snackbar</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    You can also add additional color variants to snackbar.
                </CardText>
            </CardBody>
            <CardBody>
                <Button Color="Color.Primary" Clicked="@(()=>snackbarPrimary.Show())">Primary</Button>
                <Button Color="Color.Secondary" Clicked="@(()=>snackbarSecondary.Show())">Secondary</Button>
                <Button Color="Color.Success" Clicked="@(()=>snackbarSuccess.Show())">Success</Button>
                <Button Color="Color.Danger" Clicked="@(()=>snackbarDanger.Show())">Danger</Button>
                <Button Color="Color.Warning" Clicked="@(()=>snackbarWarning.Show())">Warning</Button>
                <Button Color="Color.Info" Clicked="@(()=>snackbarInfo.Show())">Info</Button>
                <Button Color="Color.Light" Clicked="@(()=>snackbarLight.Show())">Light</Button>
                <Button Color="Color.Dark" Clicked="@(()=>snackbarDark.Show())">Dark</Button>
            </CardBody>
        </Card>
    </Column>
</Row>
<Row>
    <Column>
        <Card Margin="Margin.Is4.FromBottom">
            <CardHeader>
                <CardTitle>Stacked snackbars with custom intervals</CardTitle>
            </CardHeader>
            <CardBody>
                <CardText>
                    You can have a dynamicaly stacked snackbars with custom interval before close.
                </CardText>
            </CardBody>
            <CardBody>
                <Field Horizontal>
                    <FieldLabel ColumnSize="ColumnSize.IsFull.OnTablet.Is2.OnDesktop">Interval(ms)</FieldLabel>
                    <FieldBody ColumnSize="ColumnSize.IsFull.OnTablet.Is10.OnDesktop">
                        <NumericEdit @bind-Value="this.intervalBeforeMsgClose" />
                    </FieldBody>
                </Field>
                <Button Color="Color.Success" Clicked="@(()=>snackbarStack.PushAsync((MarkupString)("Some success message with &nbsp;<strong>some HTML markup</strong>! Timeout: " + intervalBeforeMsgClose), SnackbarColor.Success, options => { options.CloseButtonIcon = "Ok"; options.IntervalBeforeClose = intervalBeforeMsgClose; options.AnimationDuration = animationDuration; } ))">
                    Show Success message
                </Button>
                <Button Color="Color.Info" Clicked="@(()=>snackbarStack.PushAsync("Some info message! Timeout: " + intervalBeforeMsgClose, SnackbarColor.Info, options => { options.CloseButtonIcon = "Ok"; options.IntervalBeforeClose = intervalBeforeMsgClose; options.AnimationDuration = animationDuration; } ))">
                    Show Info message
                </Button>
                <Button Color="Color.Warning" Clicked="@(()=>snackbarStack.PushAsync("Some warning message! Timeout: " + intervalBeforeMsgClose, SnackbarColor.Warning, options => { options.CloseButtonIcon = "Ok"; options.IntervalBeforeClose = intervalBeforeMsgClose; options.AnimationDuration = animationDuration; } ))">
                    Show Warning message
                </Button>
                <Button Color="Color.Danger" Clicked="@(()=>snackbarStack.PushAsync("Some danger message! Timeout: " + intervalBeforeMsgClose, SnackbarColor.Danger, options => { options.CloseButtonIcon = "Ok"; options.IntervalBeforeClose = intervalBeforeMsgClose; options.AnimationDuration = animationDuration; } ))">
                    Show Danger message
                </Button>
            </CardBody>
        </Card>
    </Column>
</Row>

<Snackbar @ref="snackbar" AnimationDuration="@animationDuration">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarAction" AnimationDuration="@animationDuration">
    <SnackbarBody>
        Single line of text directly related to the operation performed
        <SnackbarAction Clicked="@(()=>snackbarAction.Hide())">ACTION</SnackbarAction>
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarMultiline" AnimationDuration="@animationDuration" Multiline>
    <SnackbarBody>
        When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy’. They told me I didn’t understand the assignment, and I told them they didn’t understand life. –John Lennon
        <SnackbarAction Clicked="@(()=>snackbarMultiline.Hide())">ACTION</SnackbarAction>
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarLeft" AnimationDuration="@animationDuration" Location="SnackbarLocation.BottomStart">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarRight" AnimationDuration="@animationDuration" Location="SnackbarLocation.BottomEnd">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarTop" AnimationDuration="@animationDuration" Location="SnackbarLocation.Top" Interval="5000">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>

<Snackbar @ref="snackbarTopEnd" AnimationDuration="@animationDuration" Location="SnackbarLocation.TopEnd" Interval="5000">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>

<Snackbar @ref="snackbarTopStart" AnimationDuration="@animationDuration" Location="SnackbarLocation.TopStart" Interval="5000">
    <SnackbarBody>
        Single line of text directly related to the operation performed
    </SnackbarBody>
</Snackbar>

<Snackbar @ref="snackbarPrimary" AnimationDuration="@animationDuration"Color="SnackbarColor.Primary">
    <SnackbarBody>
        Single line of text directly related to the operation performed
        <SnackbarAction Clicked="@(()=>snackbarPrimary.Hide())">ACTION</SnackbarAction>
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarSecondary" AnimationDuration="@animationDuration" Color="SnackbarColor.Secondary">
    <SnackbarBody>
        Single line of text directly related to the operation performed
        <SnackbarAction Clicked="@(()=>snackbarSecondary.Hide())">ACTION</SnackbarAction>
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarSuccess" AnimationDuration="@animationDuration" Color="SnackbarColor.Success">
    <SnackbarBody>
        Single line of text directly related to the operation performed
        <SnackbarAction Clicked="@(()=>snackbarSuccess.Hide())">ACTION</SnackbarAction>
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarDanger" AnimationDuration="@animationDuration" Color="SnackbarColor.Danger">
    <SnackbarBody>
        Single line of text directly related to the operation performed
        <SnackbarAction Clicked="@(()=>snackbarDanger.Hide())">ACTION</SnackbarAction>
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarWarning" AnimationDuration="@animationDuration" Color="SnackbarColor.Warning">
    <SnackbarBody>
        Single line of text directly related to the operation performed
        <SnackbarAction Clicked="@(()=>snackbarWarning.Hide())">ACTION</SnackbarAction>
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarInfo" AnimationDuration="@animationDuration" Color="SnackbarColor.Info">
    <SnackbarBody>
        Single line of text directly related to the operation performed
        <SnackbarAction Clicked="@(()=>snackbarInfo.Hide())">ACTION</SnackbarAction>
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarLight" AnimationDuration="@animationDuration"Color="SnackbarColor.Light">
    <SnackbarBody>
        Single line of text directly related to the operation performed
        <SnackbarAction Clicked="@(()=>snackbarLight.Hide())">ACTION</SnackbarAction>
    </SnackbarBody>
</Snackbar>
<Snackbar @ref="snackbarDark" AnimationDuration="@animationDuration" Color="SnackbarColor.Dark">
    <SnackbarBody>
        Single line of text directly related to the operation performed
        <SnackbarAction Clicked="@(()=>snackbarDark.Hide())">ACTION</SnackbarAction>
    </SnackbarBody>
</Snackbar>
<SnackbarStack @ref="snackbarStack"
               Location="SnackbarStackLocation.TopEnd"
               DefaultInterval="300000"
               AnimationDuration="@animationDuration"
               DelayCloseOnClick />

 @code {
    Snackbar snackbar;
    Snackbar snackbarAction;
    Snackbar snackbarMultiline;
    Snackbar snackbarLeft;
    Snackbar snackbarRight;
    Snackbar snackbarTop;
    Snackbar snackbarTopEnd;
    Snackbar snackbarTopStart;

    Snackbar snackbarPrimary;
    Snackbar snackbarSecondary;
    Snackbar snackbarSuccess;
    Snackbar snackbarDanger;
    Snackbar snackbarWarning;
    Snackbar snackbarInfo;
    Snackbar snackbarLight;
    Snackbar snackbarDark;

    SnackbarStack snackbarStack;

    double intervalBeforeMsgClose = 2000;

    private int animationDuration = 200;
}